<template>
  <div class="content">
    <div class="log" v-bind="{title:companyData.FullName}">
      <img v-bind:src="companyData.Logo" v-bind:style="{width:'190px',height:'50px'}">
      <!--<router-link to="/NewRRR/456/ddf">动态路由</router-link>-->
    </div>
    <div class="system">
      <div style="width: 787px;">
        <div v-bind:class="(system.Current?'current':'item')" v-for="system in source.data.queryData"
             v-on:click="set(system)">
          <span v-bind:class="system.Icon"></span><span class="text">{{system[octopus.passport.language]}}</span>
        </div>
        <!--    v-if="(','+octopus.passport.authorization.data+',').indexOf(','+system.ID+'_1,') > -1"-->
      </div>
    </div>
    <div class="info">
      <div>
        <span class="AiBox">
          <div v-on:click="openAI">和小豆聊个天？</div>
        </span>
      </div><div>
        <div class="panel">
          <div v-on:click="chooiseProject(project.ID)" v-for="project in projectData.data.queryData">{{project.Name}}
          </div>
        </div>
        <span class="icon iconfangchan"></span><span class="chooiseProject">选择项目</span>
      </div><div>
	      <span class="icon iconxiaoxi1" v-on:click="chooseMsg"></span>
      </div><div>
        <div class="panel">
          <div v-on:click="chooiseTheme('1')">Default</div>
<!--          <div v-on:click="chooiseTheme(2)">Sky Blue</div>-->
          <div v-on:click="chooiseTheme('2')">HeroDoo</div>
        </div>
        <span class="icon iconyanse"></span>
      </div><div>
        <div class="panel">
          <div v-on:click="chooiseLanguage(1)">简体中文</div>
          <div v-on:click="chooiseLanguage(2)">繁體中文</div>
          <div v-on:click="chooiseLanguage(3)">English</div>
          <div v-on:click="chooiseLanguage(4)">日本語</div>
          <div v-on:click="chooiseLanguage(5)">한국어</div>
        </div>
        <span class="icon iconyuyan"></span>
      </div><div class="screen" v-on:click="onScreen()">
        <!--采用vue动画，模式为同步进行,vue动画需要强制指定key的哈-->
        <transition name="fade" mode="out-in">
          <span class="icon iconquanpingzuidahua" v-if="!screen" key="s1"></span>
          <span class="icon iconzuixiaohua" v-if="screen" key="s2"></span>
        </transition>
      </div><div class="user">
        <div class="panel">
          <div>修改密码</div>
          <div v-on:click="lock">外出锁屏</div>
          <div v-on:click="exit">退出系统</div>
        </div>
        <span class="photo" :style="{backgroundImage: userPhoto,backgroundSize:'cover'}"></span><span class="text">{{octopus.passport.realName}}</span>
      </div>
    </div>
    <!--<div id="demo">-->
    <!--<button v-on:click="screen = !screen">-->
    <!--测试screen动画脚本-->
    <!--</button>-->
    <!--</div>-->
    <div id="div_Lock" class="lock_panel" v-show="octopus.passport.lock">
      <div>
        <input id="tb_Password" type="password" placeholder="***" class="form-control" data-original-title="Information"
               data-toggle="popover" data-placement="top" data-content="请输入您的密码进行解锁。" data-trigger="hover"
               v-on:keyup.enter="unlock" v-model.lazy="lock_password"/>
      </div>
    </div>
    <o-dialog v-bind:source="panel">
      <template slot="content">
        <div class="AiMessage">
          <div v-for="msg in ai_message" v-bind:class="msg.type==1?'aiBot':'myAsk'">
            <div>{{msg.content}}</div>
          </div>
<!--          <div class="aiBot"><div>您好，我是小豆，有什么能为您服务的？</div></div>-->
<!--          <div class="myAsk"><div>我想了解上海市的旅游景点有哪些？</div></div>-->
        </div>
        <div class="AiButton">
          <el-input v-model="ai_ask" placeholder="请输入您的问题。"></el-input>
          <el-button type="success" v-on:click="askAI" size="mini">提问</el-button>
          <el-button type="info" v-on:click="panel.visible=false" size="mini">关闭</el-button>
        </div>
      </template>
    </o-dialog>
  </div>
</template>

<script>
  export default {
    name: 'com_head', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        source: {data: {}},
        projectData: {data: {}},
        screen: false,
        lock_password: "",
        userPhoto: "",
        companyData: {},
        ai_message: [{type:1,content:"您好，我是小豆，有什么能为您服务的？"}],
        ai_ask: "",
        panel: {
          visible: false,
        }
      }
    },
    created: function () {
      this.init();
    },
    // 活动事件，写在这里的好处是不管是第一次创建还是后退回来，都会触发这个事件
    // 比较典型的就是列表组件，返回的时候往往是需要刷新的。
    activated: function () {
      this.load();
      this.loadCompanyInfo();
      this.loadUserData();
    },
    computed: {},
    methods: {
      // 初始化
      init: function () {
        this.initSource();
      },
      // 初始化相关内容
      initSource: function () {

      },
      load: function () {
        let o = this;
        // 根据权限列表寻找有授权的系统
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 134,
            cellData: [
              {name: "SystemID"},
              {name: "Name"},
              {name: "AuthCode", filterKey: "IN", filterValue: this.octopus.passport.authorization.data.split(',')},
            ],
            pageData: {
              index: 1,
              listSize: 11,
              rowSize: 7777//系统菜单不可能到7777个的，因为7是我的幸运数字，所以7777，哈哈哈。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              let systemData = [];
              $(data.content.queryData).each(function (index, item) {
                // 从user_passport中获取焦点系统
                if (!systemData.includes(item.SystemID)) {
                  systemData.push(item.SystemID);
                }
              });
              if (systemData.length > 0) {
                o.loadSystem(systemData);
              }
            }
          });


        // 请求项目数据
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 63,
            cellData: [
              {name: "ID", filterKey: "IN", filterValue: this.octopus.passport.authorization.project.split(",")},
              {name: "Name"}
            ],
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              // 如果没有项目编号，则使用所属权限的第一个，每个账户至少有一个项目的权限。
              if (o.octopus.tools.IsNullOrEmpty(o.octopus.passport.project)) {
                o.octopus.passport.project = $(data.content.queryData)[0].ID;
              }
              // 如果项目ID不为空，则判断项目权限是否还存在于当前登陆的账户权限中，如果不存在则也默认
              else if (("," + o.octopus.passport.authorization.project + ",").indexOf(',' + o.octopus.passport.project + ",") < 0) {
                o.octopus.passport.project = $(data.content.queryData)[0].ID;
              }
              $(data.content.queryData).each(function (index, item) {
                // 从user_passport中获取焦点系统
                if (o.octopus.passport.project == item.ID) {
                  $(".chooiseProject").text(item.Name);
                }
              });
              // 新增属性，需要使用$set，详细参考：https://blog.csdn.net/panyang01/article/details/76665448
              o.$set(o.projectData, "data", data.content);
            } else {
              o.octopus.tips.error(data);
            }
          });
      },
      // 加载菜单系统
      loadSystem: function (systemList) {
        let o = this;
        // 请求后台八爪鱼API框架。
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 13,
            orderData: "Sort ASC",
            cellData: [
              {name: this.octopus.passport.language},
              {name: "ID", filterKey: "IN", filterValue: systemList},
              {name: "Icon"},
              {name: "SystemID"}
            ],
            pageData: {
              index: 1,
              listSize: 11,
              rowSize: 77//系统菜单不可能到77个的，因为7是我的幸运数字，所以777，哈哈哈。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              o.octopus.passport.system = o.octopus.passport.system ? o.octopus.passport.system : $(data.content.queryData)[0].ID;
              $(data.content.queryData).each(function (index, item) {
                // 从user_passport中获取焦点系统
                if (o.octopus.passport.system == item.ID) {
                  item.Current = true;
                  // 触发事件，这个click是给组件注册的click事件，不是DOM的click。
                  if (o.click) {
                    o.click();
                  }
                } else {
                  item.Current = false;
                }
              });

              // 新增属性，需要使用$set，详细参考：https://blog.csdn.net/panyang01/article/details/76665448
              o.$set(o.source, "data", data.content);
              // 如果面板是锁定的则弹出高斯模糊遮罩面板。
              if (o.octopus.passport.lock) {
                $(".render").addClass("lock");
              }
            } else {
              o.octopus.tips.error(data);
            }
          });

      },
      set: function (data) {
        $(this.source.data.queryData).each(function (index, item) {
          item.Current = false;
        });
        data.Current = true;
        // 如果系统ID发生变更，才触发，否则不触发无畏的事件。
        if (this.octopus.passport.system != data.ID) {
          // 保存system，在App.vue中会监听这个对象时刻动态保存至LocationStorage中。
          this.octopus.passport.system = data.ID;
          // 回调click事件
          if (this.click) {
            this.click(data);
          }
        }
      },
      openAI: function () {
        this.panel.visible = true;
        // 设置焦点
        setTimeout(function () {
          $('.AiButton input').focus();
        }, 1000)
      },
      // 和AI聊个天
      askAI: function () {
        let o = this;
        // 有提问时处罚
        if (!this.octopus.tools.IsNullOrEmpty(this.ai_ask)) {
          if (this.ai_ask.length > 3) {
            // 插入对象
            this.ai_message.push({type:2,content:this.ai_ask});
            this.ai_message.push({type:1,content:"小豆正在思考中。。。"});

            // 发起请求
            this.octopus.request.api.post("/Open/AI/Ernie/Speed128K", {
                "messages": [
                  {
                    "role": "user",
                    "content": this.ai_ask
                  }
                ],
              },
              // 处理回调事件，通过分析data.status.code的状态来实现。
              function (data) {
                if (data.status.code == 200) {
                  // 删除最后一行
                  o.ai_message.pop();
                  // 得到数据
                  o.ai_message.push({type:1,content:data.content.result.replace(/\r\n/g, "<br>")});
                  // 创建dom
                  o.ai_ask = "";
                } else {
                  o.octopus.tips.error(data);
                }
              });
          }
          else{
            o.octopus.tips.warning("您的提问太简短啦，能否多些暗示？");
          }
        }
      },
      // 选择项目
      chooiseProject: function (index) {
        // 变更项目索引，然后刷新系统。
        this.octopus.passport.project = index;
        this.chooiseFinish();
      },
      // 选择语言
      chooiseLanguage: function (id) {
        let o = this;
        // 更新用户的语言代码
        this.octopus.request.api.post("/Octopus/Engine/Item", {
            id: 1,// 用户表的八爪鱼sourceID
            value: o.octopus.passport.id,
            cellData: [{
              name: "LanguageTypeID",
              defaultValue: id // 更新用户表的语言，太方便了。
            }],
            type: "UPDATE"
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            // 如果更新成功
            if (data.status.code == 200) {
              // 更新护照
              o.octopus.request.security.passport.get(function (passport_data) {
                if (!o.octopus.tools.IsNullOrEmpty(passport_data) && passport_data.status.code == 200) {
                  o.octopus.request.security.token.get(function (token_data) {
                    if (!o.octopus.tools.IsNullOrEmpty(token_data) && token_data.status.code == 200) {
                      // 清空tab按钮
                      o.chooiseFinish();
                      // this.$forceUpdate(); // 哈哈，这个也无效。。
                      // window.open("/admin/home", "_self");;;
                    } else {
                      o.octopus.tips.error(token_data);
                    }
                  });
                } else {
                  o.octopus.tips.error(passport_data);
                }
              });
            }
          });
      },
      // 选择主题
      chooiseTheme:function(id){
        let o = this;

        // alert(name);
        // this.octopus.template.choiceTheme(name);
        // console.warn(JSON.stringify(this.octopus.passport.theme));
        // // 选择完成，刷新。
        // this.chooiseFinish();


        // 更新用户的语言代码
        this.octopus.request.api.post("/Octopus/Engine/Item", {
            id: 1,// 用户表的八爪鱼sourceID
            value: o.octopus.passport.id,
            cellData: [{
              name: "ThemeID",
              defaultValue: id // 更新主题表
            }],
            type: "UPDATE"
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            // 如果更新成功
            if (data.status.code == 200) {
              // 更新护照
              o.octopus.request.security.passport.get(function (passport_data) {
                if (!o.octopus.tools.IsNullOrEmpty(passport_data) && passport_data.status.code == 200) {
                  o.octopus.request.security.token.get(function (token_data) {
                    if (!o.octopus.tools.IsNullOrEmpty(token_data) && token_data.status.code == 200) {
                      // 清空tab按钮
                      o.chooiseFinish();
                      // this.$forceUpdate(); // 哈哈，这个也无效。。
                      // window.open("/admin/home", "_self");;;
                    } else {
                      o.octopus.tips.error(token_data);
                    }
                  });
                } else {
                  o.octopus.tips.error(passport_data);
                }
              });
            }
          });
      },
      chooiseFinish: function () {
        // this.octopus.passport.tabCurrentName = "M_0";
        window.open("../platform/home", "_self");
      },
      exit: function () {
        this.octopus.passport.appKey = "";
        this.octopus.passport.token = "";
        this.octopus.router.jumplogin();
      },
      // 锁屏
      lock: function () {
        // 值反转
        this.octopus.passport.lock = true;
        $(".render").addClass("lock");
      },
      unlock: function () {
        let unlock_password = this.octopus.passport.name + "marco" + this.octopus.passport.timespan + "july" + this.lock_password;
        unlock_password = this.octopus.tools.md5(unlock_password);
        console.log(unlock_password + " || " + this.octopus.passport.password);
        if (unlock_password == this.octopus.passport.password) {
          this.octopus.passport.lock = false;
          $(".render").removeClass("lock");
          this.lock_password = "";
        } else {
          this.octopus.tips.error("Unlocking Password Error.");
        }
      },
      // 初始化事件
      onScreen: function () {
        if (!this.screen) {
          this.fullScreen();
        } else {
          this.exitScreen();
        }
      },
      fullScreen: function () {
        let el = document.documentElement;
        let rfs = el.requestFullScreen || el.webkitRequestFullScreen;
        if (typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
          let wscript = new ActiveXObject("WScript.Shell");
          if (wscript != null) {
            wscript.SendKeys("{F11}");
          }
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        } else if (el.oRequestFullscreen) {
          el.oRequestFullscreen();
        } else {
          this.octopus.tips.warning("浏览器不支持全屏调用，请更换浏览器或按F11键切换全屏！");
        }
        this.screen = true;
      },
      exitScreen: function () {
        let el = document;
        let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
        if (typeof cfs != "undefined" && cfs) {
          cfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
          let wscript = new ActiveXObject("WScript.Shell");
          if (wscript != null) {
            wscript.SendKeys("{F11}");
          }
        } else if (el.msExitFullscreen) {
          el.msExitFullscreen();
        } else if (el.oRequestFullscreen) {
          el.oCancelFullScreen();
        } else {
          swal({title: "浏览器不支持全屏调用！", text: "请更换浏览器或按F11键切换全屏！(3秒后自动关闭)", type: "error", timer: 3000});
        }
        this.screen = false;
      },
      loadCompanyInfo: function () {
        let o = this;
        this.octopus.request.api.post("/Octopus/Engine/Item", {
            id: 31,
            value: this.octopus.passport.authorization.company,
            type: "SELECT",
            cellData: [
              {name: "Logo"},
              {name: "Name"},
              {name: "FullName"},
              {name: "ContactsMobile"}
            ]
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              $(data.content.cellData).each(function (index, item) {
                if (item.name == "Logo") {
                  if (!o.octopus.tools.IsNullOrEmpty(item.defaultValue)) {
                    o.companyData[item.name] = JSON.parse(item.defaultValue)[0].url;
                  } else {
                    o.companyData[item.name] = "/static/skin/default/admin/home/img/GDSmart-min.png";
                  }
                } else {
                  o.companyData[item.name] = item.defaultValue;
                }
              })
            } else {
              o.octopus.tips.error(data);
            }
          });
      },
      loadUserData: function () {
        let o = this;
        this.octopus.request.api.post("/Octopus/Engine/Item", {
            id: 199,
            value: this.octopus.passport.id,
            type: "SELECT",
            cellData: [
              {name: "ID"},
              {name: "PhotoPath"},
              {name: "RoleName"}
            ]
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              o.userRole = o.octopus.tools.parseCell(data.content, "RoleName").defaultValue;
              let photo = o.octopus.tools.parseCell(data.content, "PhotoPath").defaultValue;
              if (photo) {
                photo = JSON.parse(photo);
                photo = photo[0].url;
                o.userPhoto = "url(\'" + photo + "\')";
              } else {
                // 否则使用默认头像
                o.userPhoto = "url(\'../../../static/skin/default/APP/User/Main/Page/img/none.png\')";
              }
            } else {
              o.octopus.tips.error(data);
            }
          });
      },
      chooseMsg: function() {
        let index =  this.octopus.passport.tab.findIndex(item => item.id == 763)
        if(index == -1) {
          this.octopus.passport.tab.push({
            current: false,
            id: 763,
            name: "消息通知",
            url: "/MCS/AIGC/Notification/List"
          })
          this.octopus.passport.tabCurrentName = "M_763"
        } else {
          this.octopus.passport.tabCurrentName = "M_763"
        }
      },
    },
    watch: {},
    props: ["click"]
  }
</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
